import { View } from "@tarojs/components";
import React, { Component } from "@tarojs/taro";
import Echarts from '../components/Echarts'

// 地图
export default class RegionalStatistics extends Component{
  

    setChartOptions(chart) {

        websiteStatics(moment().subtract(10,"day"),moment().format('YYYY-MM-DD')).then(res => {
        console.log(res);
            const data = res.data.data
            const {chartData,websiteList} = data
            const lengendData = websiteList.map(item => item.value);
            console.log(lengendData);
            chartData.forEach(item => {
                item.x = item.x.substring(5, 10)
            });
            const xAxisData = chartData.map(item => item.x)
            console.log(xAxisData);
            
            //构造数据
            const seriesData = websiteList.map((item,index) => {

                const data = chartData.map(chartDataItem => {
                   return  chartDataItem[item.key]
                })

                return {
                    name: item.value,
                    type: 'line',
                    stack: '总量',
                    data,
                    lineStyle: {
                        color:getColorByIndex(index)
                    }
                }
            })
            console.log(seriesData);

            
    let option = {
    tooltip: {
      trigger: 'axis',
      position(pos, params, dom, rect, size) {
        if (pos[0] < size.viewSize[0] / 2) {
          return [pos[0], size.viewSize[1] / 3]
        } else {
          return [pos[0] - 100, size.viewSize[1] / 3]
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        show: false,
        end: 60,
      },
      {
        type: 'inside',
        start: 0,
        end: 60,
        filterMode: 'filter',
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: '#666666'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: {
        color: '#666666'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: ['#E6E6E6'],
          type: 'dashed'
        }
      }
    },
    series: seriesData
  };
  chart.setOption(option);
   
        })






}


    render() {
        const height = Taro.pxTransform(500);
        return (
            <View >
                <View className='caption '>
                    地域统计
                </View>
                <Echarts setChartOptions={this.setChartOptions.bind(this)} height={height}/>
            </View>
        )
    }
}